<template>
	<view>
		<view class="cu-bar bg-white">
			<view class="action text-cut">
				<text class="cuIcon-titles text-blue"></text>
				<text >{{ qbankName }}</text>
			</view>
			<view class="action">
				我的排名:{{rankData.curRank}}  
				<view  v-if="curTab == 0" class="padding-left-sm"> 答题:{{rankData.curNum}} </view>
				<view  v-if="curTab == 1" class="padding-left-sm"> 得分:{{rankData.curNum}} </view>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item  flex-sub" :class="0==curTab?'text-blue cur':''" @tap="tabSelect" data-id="0">
					<text class="cuIcon-upstagefill margin-right-xs "></text> 做题排行榜
				</view>
				<view class="cu-item  flex-sub" :class="1==curTab?'text-blue cur':''" @tap="tabSelect" data-id="1">
					<text class="cuIcon-upstagefill margin-right-xs"></text> 得分排行榜
				</view>
			</view>
		</scroll-view>
		
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item, index) in rankList" :key="index">
				<view class="cu-avatar round lg" :style="'background-image:url(' + item.avatar + ')'">
					
					
				</view>

				<view class="content">
					<view class="text-grey">{{item.nickname}}</view>
					<view class="text-grey" v-if="curTab == 0">答题：{{item.num}} 道</view>
					<view class="text-grey" v-if="curTab == 1">得分：{{item.num}} 分</view>
				</view>
				<view class="action">
					<view class="text-grey text-df">
						第 {{item.ran}} 名
						<image class="huangguan1" src="../../static/rank/one.png"  v-if="index == 0"></image>
						<image class="huangguan1" src="../../static/rank/two.png"  v-if="index == 1"></image>
						<image class="huangguan1" src="../../static/rank/three.png"  v-if="index == 2"></image>
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="bg-white padding-xl" v-if="rankList.length == 0">
			<u-empty  mode="data" text="暂无排名数据"></u-empty>
		</view>
		
	</view>	
</template>
<script>
	
	import { qbmsAnswerRank } from "@/api/qbms.js"
	
	export default {
		data() {
			return {
				qbankId: 0,
				qbankName: "",
				curTab: 0,
				rankData: {}, // 排名数据
				rankList: [], // 排名列表
			}
		},
		onLoad() {
			let qbankId = uni.getStorageSync("qbankId");
			let qbankName = uni.getStorageSync("qbankName");
			if (!qbankId) {
				uni.navigateTo({
					url: "/pages/index/bankSelect"
				})
			}
			this.qbankId = qbankId;
			this.qbankName = qbankName;
		},
		onShow() {
			this.getAnswerRank();
		},
		methods: {
			/** 查询答题排名 */
			getAnswerRank() {
				qbmsAnswerRank({
					categoryId: this.qbankId,
					answerStatus: this.curTab == 0 ? null : 1,
				}).then(res => {
					this.rankData = res.data;
					this.rankList = res.data.rankList;
				})
			},
			
			tabSelect(e) {
				this.curTab = e.currentTarget.dataset.id;
				this.getAnswerRank();
			}
		}
	}
</script>
<style scoped lang="scss">
	.huangguan1 {
		width: 40px;
		height: 40px;
		position: absolute;
		right: 5rpx;
		top: -18*1rpx;
	}
</style>